﻿@{    Layout = "";
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>静态资源加载测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            line-height: 1.6;
        }
        .test-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .success {
            color: green;
        }
        .error {
            color: red;
        }
        .test-link {
            margin-right: 10px;
            display: block;
            margin-bottom: 10px;
        }
        #loading-status {
            margin-top: 20px;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>静态资源加载测试</h1>
    
    <div class="test-section">
        <h2>1. 资源直接访问测试</h2>
        <p>点击以下链接测试静态资源是否可以直接访问：</p>
        <a href="~/ruoveaui/xg6rvft8p/vue/vue.js" target="_blank" class="test-link">测试Vue.js加载</a>
    </div>
    
    <div class="test-section">
        <h2>2. JavaScript 资源加载测试</h2>
        <div id="loading-status">
            <p id="vue-status">Vue.js: 加载中...</p>
        </div>
    </div>
    
    <div class="test-section">
        <h2>3. Vue 实例测试</h2>
        <div id="app">
            <p v-if="message" class="success">{{ message }}</p>
            <p v-else class="error">Vue 实例未初始化</p>
        </div>
    </div>
    
    <!-- 使用动态脚本加载，这样可以更好地检测加载状态 -->
    <script>
        console.log('开始加载Vue.js');
        document.getElementById('vue-status').innerHTML = 'Vue.js: 加载中...';
        
        function loadScript(url, onLoad, onError) {
            const script = document.createElement('script');
            script.src = url;
            script.onload = onLoad;
            script.onerror = onError;
            document.body.appendChild(script);
        }
        
        // 加载Vue.js
        loadScript('/ruoveaui/xg6rvft8p/vue/vue.js', 
            function() {
                console.log('Vue.js 加载成功');
                document.getElementById('vue-status').innerHTML = '<span class="success">Vue.js: 加载成功</span>';
                
                // Vue加载成功后尝试创建实例
                try {
                    new Vue({
                        el: '#app',
                        data: {
                            message: 'Vue 实例初始化成功！'
                        },
                        mounted() {
                            console.log('Vue实例已挂载');
                        }
                    });
                } catch (e) {
                    console.error('Vue实例创建失败:', e);
                    document.getElementById('vue-status').innerHTML = `<span class="error">Vue.js: 加载失败 - ${e.message}</span>`;
                }
            },
            function() {
                console.error('Vue.js 加载失败');
                document.getElementById('vue-status').innerHTML = '<span class="error">Vue.js: 加载失败</span>';
                // 显示详细错误信息
                alert('Vue.js 加载失败，请检查网络或资源路径是否正确');
            }
        );
    </script>
</body>
</html>